<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-01-07 15:57:42
 * @LastEditors: zhou
 * @LastEditTime: 2022-07-13 15:54:19
-->
// 纵向轮播和滚动
<template>
    <div class="swiper-box full-screen">
        <el-carousel
            v-if="mode == 'swiper'"
            height="100%"
            direction="vertical"
            :autoplay="true"
            :interval="interval"
            indicator-position="none"
        >
            <el-carousel-item
                v-for="(item_page, index_page) in pages"
                :key="index_page"
            >
                <div>
                    <slot
                        name="swiper_slide"
                        classname="swiper-slide"
                        :list="
                            data_list.slice(
                                index_page * pageSize * num,
                                index_page * pageSize * num  + pageSize * num
                            )
                        "
                    >
                    </slot>
                </div>
                
            </el-carousel-item>
        </el-carousel>

        <div
            v-else-if="mode == 'scroll'"
            ref="scrollerItem"
            class="swiper-box swiper-container swiper-container-free-mode"
        >
            <div class="swiper-wrapper">
                <slot name="scroll_slide" classname="swiper-slide"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper/js/swiper";
import "swiper/css/swiper.min.css";
// import Swiper from "swiper/vue/swiper";
// import "swiper/swiper.min.css";

export default {
    name: "ScrollSwiper",
    components: {},
    props: {
        interval: {
            // 播放速度
            type: [Number, String],
            default: 1500,
        },
        page_size: {
            // 每页条数
            type: Number,
            default: 3,
        },
        data_list: {
            // 数据源
            type: Array,
            default: () => [],
        },
        row_height: {
            type: Number,
            default: 54,
        },
        mode: {
            type: String,
            default: "scroll",
        },
        num: {
            type: Number,
            default: 1
        },
        // 配置项
        options: {
            type: Object,
            default() {
                return {
                    slidesPerView: "auto",
                    direction: "vertical",
                    speed: 3500,
                    loop: true,
                    autoplay: {
                        delay: 0,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    on: {
                        click: (swiper) => {
                            // this.data_list[swiper.realIndex]
                            // console.log(arguments)
                        },
                    },
                };
            },
        },
    },
    data() {
        return {
            pages: 0,
            pageSize: 0,
            p_height: 480,
        };
    },
    watch: {
        p_height: {
            handler(n, old) {
                if (this.mode == "swiper") this.computedPages();
            },
        },
        data_list: {
            handler(n, o) {
                if (this.mode == "scroll") { 
                    this.initSwiper(); 
                }
                else if (this.mode == "swiper") {
                    
                    this.computedPages()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {},

    created() {},
    mounted() {
        // this.$nextTick(() => {
        //   this.computedPages()
        // })
    },

    methods: {
        initSwiper() {
            if (this.swiper) {
                // 销毁对象
                this.swiper.destroy();
                this.swiper = null;
            }
            this.$nextTick(() => {
                let parentH = this.$refs.scrollerItem.offsetHeight,
                    childrenH = 0;
                this.$refs.scrollerItem
                    .querySelectorAll(".swiper-slide")
                    .forEach((el) => {
                        childrenH += el.offsetHeight;
                    });
                // console.log(parentH);
                // console.log(childrenH);
                if (childrenH > parentH) {
                    this.swiper = new Swiper(
                        this.$refs.scrollerItem,
                        this.options
                    );
                    this.swiper.el.onmouseover = (event) => {
                        this.swiper.autoplay.stop();
                    };
                    this.swiper.el.onmouseleave = (event) => {
                        this.swiper.autoplay.start();
                    };
                }
            });
        },

        computedPages() {
            this.pageSize =
                Math.floor(this.p_height / this.row_height) || this.page_size;
            let temp = Math.floor(this.data_list.length / (this.pageSize * this.num));
            this.pages =
                this.data_list.length % (this.pageSize * this.num) == 0 ? temp : temp + 1;

        },
    },
};
</script>

<style>
.swiper-container-free-mode .swiper-wrapper {
    transition-timing-function: linear;
}
</style>

<style lang="scss">
@import "@/assets/styles/variables.scss";
.swiper {
    // background-color: aquamarine;
}
.el-carousel {
    height: 100%;
}
.el-carousel__container {
    height: 100%;
}

.swiper-container {
    height: 100%;
    .swiper-wrapper {
        display: block;
    }
    .swiper-slide {
        height: auto;
    }
}
</style>
